<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app1">
    <el-container>
        <!--垂直和水平导航栏-->
        <el-header style="width: 100%;"> <el-menu
                :default-active="activeIndex3"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">体育馆场地预约系统</el-menu-item>
            <el-menu-item index="3" style="float:right"><a href="adminLogin.jsp" target="_blank" >退出登录</a></el-menu-item>
            <li style="float:right "><h5 style="color: #eeeeee;height: 5px;margin-top: 20px" v-model="adminname"> 管理员,{{adminname}},欢迎您！</h5></li>
            <div style="height: 1px;float:right" >
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
            </div>
        </el-menu></el-header>
        <el-container>
            <el-aside width="200px" style="height: 650px"><el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="bookHandleOpen"
                    @close="bookHandleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="width: 100%;height:100%"
                    :inline="true">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>场地管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="toFieldManage()">场地信息</el-menu-item>
                        <el-menu-item index="2-2">增加场地</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="toUserManage()">用户信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>公告管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="toNoticeManage">公告信息</el-menu-item>
                        <el-menu-item index="3-2">新增公告</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>评论管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" @click="toCommentManage()">评论信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>预约管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1">场地预约信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu></el-aside>

          <!--所有预约信息表格-->
          <el-main>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item><a href='admin.html'>后台管理</a></el-breadcrumb-item>
                  <el-breadcrumb-item>场地预约管理</el-breadcrumb-item></el-breadcrumb>
              <br>
              <div class="block">
                  <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="选择预约时间筛选"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <el-button type="primary" icon="el-icon-search" @click="selectByDay()">搜索</el-button>
              </div>

              <el-table
                      ref="multipleTable"
                      :data="bookfieldData"
                      tooltip-effect="dark"
                      style="float:left;width: 100%">

                  <el-table-column
                          type="index"
                          width="50">
                  </el-table-column>
                  <el-table-column
                          prop="fieldname"
                          label="场地名称"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="userid"
                          label="用户ID"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="bookday"
                          label="预约时间"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="starttime"
                          label="开始时间"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="endtime"
                          label="结束时间"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="fieldbookstate"
                          label="审批状态"
                          width="120">
                  </el-table-column>
                  <el-table-column
                          prop="submittime"
                          label="提交申请时间"
                          width="160">
                  </el-table-column>
                  <el-table-column
                          fixed="right"
                          width="100">
                      <template slot-scope="scope">
                          <a v-if="scope.row.fieldbookstate=='审核中'||scope.row.fieldbookstate=='已拒绝'">
                          <el-button @click="accessBook(scope.row)" type="text" size="small">通过</el-button>
                          <el-button @click="refuseBook(scope.row)" type="text" size="small">拒绝</el-button></a>
                      </template>
                  </el-table-column>
                  <el-table-column
                          fixed="right"
                          label=""
                          width="100">
                      <template slot-scope="scope">
                          <a v-if="scope.row.fieldbookstate=='预约成功'">
                              <el-button @click="refuseBook(scope.row)" type="text" size="small">拒绝</el-button></a>
                          <a v-if="scope.row.fieldbookstate=='预约成功'||scope.row.fieldbookstate=='已拒绝'">
                          <el-button type="text" size="small"@click="isDeleteMes(scope.row)">删除</el-button></a>
                      </template>
                  </el-table-column>
              </el-table>
          </el-main>
      </el-container>
    </el-container>





</div>



<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>


<script>
    new Vue({
        el: "#app1",

        mounted(){
            this.selectALLBookMes();
            this.getAdminName();

        },
        methods: {
            //获得登录的管理员姓名
            getAdminName(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getLoginAdmin",
                    method:"get"
                }).then(function (resp){
                    _this.adminname=resp.data;
                })
            },
            //跳转到公告管理
            toNoticeManage(){
                window.location.href="adminNoticeManage.html";

            },
            //跳转到用户管理页面
            toUserManage(){
                window.location.href="adminUserManager.html"
            },
            //跳转到评论管理
            toCommentManage(){
                window.location.href="adminCommentManage.html";
            },
            //根据预约时间筛选表格内容
            selectByDay(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectBookMesByDay?bookday="+_this.value1,
                    method:"get"
                }).then(function (resp){
                    _this.bookfieldData=resp.data;
                    _this.value1='';
                })
            },
            //折叠栏关闭
            isDeleteMes(row) {
                this.$confirm('删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteBookMes(row);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //删除预定信息
            deleteBookMes(row){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/deleteBookFieldMes?fieldbookid="+row.fieldbookid,
                    method:"get"
                }).then(function (resp){
                    _this.selectALLBookMes();
                    _this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success'
                    });
                })
            },
            //拒绝预约审核
            refuseBook(row){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/refuseBookFieldId?fieldbookid="+row.fieldbookid,
                    method:"get"
                }).then(function (resp){
                    _this.selectALLBookMes();
                    _this.$message({
                        message: '已拒绝',
                        type: 'success'
                    });
                })
            },
            //通过预约审核
            accessBook(row){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/accessBookField?fieldbookid="+row.fieldbookid,
                    method:"get"
                }).then(function (resp){
                    _this.selectALLBookMes();
                    _this.$message({
                        message: '审批成功',
                        type: 'success'
                    });
                })
            },
            //查找所有场地预约信息
            selectALLBookMes(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectAllBookMes",
                    method:"get"
                }).then(function (resp){
                    _this.bookfieldData=resp.data;
                })
            },
            //跳转到场地管理
            toFieldManage(){
                window.location.href="admin.html"
            },
            /*导航栏展开方法*/
            bookHandleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            bookHandleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(){
                console.log(key, keyPath);
            }
            /*导航栏展开方法*/



        },
        data() {
            return {
                //登录的管理员模型
                adminname:'',
                //日期查询的模型
                value1:'',
                //场地预约表格模型
                bookfieldData:[],

            };
        }

    })

</script>

</body>
</html>